<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no,target-densitydpi=300">
<title>业务详情</title>
<link rel="stylesheet" type="text/css" href="res/common.css">
<script src="../resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../resources/cubiq-iscroll-a8b8720/src/iscroll-lite.js"></script>
<script src="res/jqplot/jquery.jqplot.min.js"></script>
<script src="res/jqplot/plugins/jqplot.pointLabels.js"></script>
<script src="res/jqplot/plugins/jqplot.barRenderer.js"></script>
<script src="res/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="res/jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
<script src="res/js/jquery.mobile-1.2.0-rc.2.min.js"></script>
<script src="res/jqplot/plugins/jqplot.blockRenderer.min.js"></script>
<script src="res/common.js"></script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F883c1dc0c5cf74748ff6876f4606832f' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" src="res/index/js/detail.js"></script>
<link rel="stylesheet" type="text/css" href="res/css/jquery.jqplot.min.css">
<script type="text/javascript">
var curphone = window.localStorage.getItem("curphone");
var userkey = window.localStorage.getItem("userkey");
var flag = "1";
var upflag = "1";
var myScroll;
var myScroll2;
function upordown1(){
	$("#recodet").slideToggle();
	$("#sanjiao").fadeToggle();
	if(upflag=="1"){
		$("#upordown").attr("src","res/img/down.png");
		upflag = "0";
	}else{
		$("#upordown").attr("src","res/img/up.png");
		upflag = "1";
	}
	 window.setTimeout(function(){myScroll.refresh();}, 1000);
	
}
function loaded() {
	myScroll = new iScroll('wrapper');
	myScroll2 = new iScroll('daycolu');
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);
$(function(){
	
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
	addEventListener("load", function() { setTimeout(bottomrefre, 1000); }, false);
	addEventListener("orientationchange", function() { setTimeout(hideURLbar, 0); }, false);
	addEventListener("load",function(){$("#loading").hide();
	
		$(".floatBoxBg").hide();
		var restArray=$(".jqplot-series-3");
//		alert(restArray);
		for(var i = 0;i<restArray.length;i++)
		{
			//alert($(restArray[i]).text())
			if($(restArray[i]).text().indexOf("已用",0)>=0)
			{
				var restP=$(restArray[i]).css("left");
				var pxIndex=restP.indexOf("px",0);
				var leftValue=parseFloat(restP.substring(0,pxIndex));
				$(restArray[i]).css("left",(leftValue-50)+"px");
			}
		}

		
	});
      function hideURLbar(){ 
               window.scrollTo(0,1); 
			   
      }
	  /*
      if(navigator.userAgent.toLowerCase().indexOf("android", 0)<0){
         $("#footer").css({"center;z-index":"999","position":"fixed","bottom":"0"});
         window.scrollTo(0,1); 
        }else{
        $("#footer").css({"position":"fixed","bottom":"0"});
			var top = $("#footer").offset().top;
		$(window).scroll(function(){
			$("#footer").offset({top:$(document).scrollTop()+top});
		});
        }
*/

	var busiType=getQueryParameter("busiType");
	var name="";
	if(detectDeviceType()=="Apple"){
		$("#viewport").attr("content","width=640, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no");
		$("#footer1").height("160px");
	}
	
	switch(parseFloat(busiType))
	{
		case 1:
			name="语音";
			$("#detheader").text("语音详情");
			$("#maptitle").text("本月语音使用情况");
			$("#changebtn").text("显示折线图");
			$("#usetype1").text(name);
			$("#usetype2").text(name);
			break;
		case 2:
			name="流量";
			$("#detheader").text("流量详情");
			$("#maptitle").text("本月流量使用情况");
			$("#changebtn").text("显示折线图");
			$("#usetype1").text(name);
			$("#usetype2").text(name);
			break;
		case 3:
			name="短信";
			$("#detheader").text("短信详情");
			$("#maptitle").text("本月短信使用情况");
			$("#changebtn").text("显示折线图");
			$("#usetype1").text(name);
			$("#usetype2").text(name);
			break;
		case 4:
			name="彩信";
			$("#detheader").text("彩信详情");
			$("#maptitle").text("本月彩信使用情况");
			$("#changebtn").text("显示折线图");
			$("#usetype1").text(name);
			$("#usetype2").text(name);
			break;
	}
	
	$("input[type='radio']").bind("change",function(){
		if($("input[type='radio']:eq(0)").attr("checked")){
			$("#forecast").hide();
			$("#daycolu").show();
			window.setTimeout(function(){myScroll.refresh();},1000);
		}else{
			$("#daycolu").hide();
			$("#forecast").show();
			myScroll.refresh();
		}
	});
	
		var u1=jsonserver+"bd/userphone/"+curphone+"/"+userkey+"/busitype/"+busiType;
		$.getJSON(u1+".jsonp?callback=?",{},function(data){
			$("#v1").html(data.recTitle);
			$("#v2").html(data.recPrice);
			$("#newbusi").text($("#v1").text());
			$("#fee").text($("#v2").text());
			$("#history").html(data.historyTabStr);
			$("#monthbar").html(data.title1);
			if(data.text3=="1"){
				$("#monthtop").hide();
			}else{
				$("#toptitle").html(data.title3);
				$("#toptab").html(data.text3);
			}
			$("#monthtab").html(data.text1);
			$("#histitle").html(data.title4);
			$("#histab").html(data.text4);
			if(/*data.title2==null*/true){
				$("#recommon").hide();
			}else{
				$("#recommon").show();
				$("#recomtext").append(data.title2);
				$("#recotitltext").append(data.recTitle);
				$("#recodettb1").append(data.recPrice);
			}
		});
	var u2=jsonserver+"bd/jqplot/userphone/"+curphone+"/"+userkey+"/busitype/"+busiType;
	var contF=busiType==2?'%.2f':'%.0f';
	$.getJSON(u2+".jsonp?callback=?",{},function(data){
		 $.jqplot.config.enablePlugins = true;
        plot1 = $.jqplot("yuyinbar", [data.datas], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { 
				show: true ,
				formatString:contF
				},
				rendererOptions:{
                    varyBarColor: false,
                    barPadding: 60, //设置同一分类两个柱状条之间的距离（px）
            	    barMargin: 30, //设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上）		
					
            	    barDirection: 'vertical', //设置柱状图显示的方向：垂直显示和水平显示
            	    //，默认垂直显示 vertical or horizontal.
            	    barWidth:25, // 设置柱状图中每个柱状条的宽
					color:'#4f81bd'
                }
            },
			 grid : {
				 drawGridLines: false, 
                 drawBorder : false,
                 shadow:false,
				 background: '#fff', // 设置整个图表区域的背景色 
				
          	 },
             axes:
     		 {
			   //轴线相关参数
				 xaxis:
				 {
				   renderer: $.jqplot.CategoryAxisRenderer,
				    tickOptions:{
					show: true, 
					showLabel: true,
					showMark: true,
					fontSize:22,
					showGridLine: true // 是否在图表区域显示刻度值方向的网格线   
					}
				 },
				 yaxis:
				 {
					tickOptions:{
						showLabel:false,
						showTick:false,
						markSize:0,
						fontSize:22,
					},
				 }
     	 	}
    
        });

		gotoday(data.curDay,data.curMonthTotalDays);
		var d1 = data.linedatas[0];
	
    var d2 = data.linedatas[1];
 	var d3 = new Array();
	var p1y;
	var p1x;
	var p2y;
	var p2x;
	var p3y;
	var p3x;
	var l2x;
	var l2xx;
	var yesorno;
	if(data.point1!=null){
		d3.push(data.point1);
		p1x = data.point1[0].split("-")[1];
		p1y = data.point1[1];
	}
	if((data.point2!=null)&&data.point1[1]!=data.point2[1]){
		d3.push(data.point2);
		p2x = data.point2[0].split("-")[1];
		p2y = data.point2[1];
		l2x = p2x;
		yesorno = true;
	}else{
		p2y = data.packageLine;
		l2x=31;
		l2xx = "";
		yesorno = false;
	}
	if(data.point3!=null){
		d3.push(data.point3);
		p3x = data.point3[0].split("-")[1];
		p3y = data.point3[1];
	}
	var lineymax;
	var d4 = [15,p2y,data.text];
	if((data.point2!=null)&&data.point1[1]!=data.point2[1]){
		var vx = parseFloat(data.point3[1]/100);
		if(vx==0) {vx=1;}
		lineymax = (parseFloat(data.point3[1]/20)+1)*20+(20*vx);
	}else{
		var vx = parseFloat(p2y/100);
		if(vx==0) {vx=1;}
		lineymax = (parseFloat(p2y/20)+1)*20+(20*vx);
	}
	$("#scrdet").text(data.barDesc);
	switch(parseFloat(busiType)){
		case 1:
			$(".danwei").text("语音（"+data.unitStr+"）");
			break;
		case 2:
			$(".danwei").text("流量（"+data.unitStr+"）");
			break;
		case 3:
			$(".danwei").text("短信（"+data.unitStr+"）");
			break;
		case 4:
			$(".danwei").text("彩信（"+data.unitStr+"）");
			break;
	}
	
	$("#line_det").text(data.lineDesc);
	//d3=[[8.30,37]];
	//var d5 = [["8.15", 252],["8.16", 254],["8.17", 258],["8.18", 263],["8.19", 266],["8.20", 277],["8.21", 295],["8.22", 335],["8.23", 337],["8.24", 337],["8.25", 346],["8.26", 364],["8.27", 379],["8.28", 380]];
	var d5 = data.linedatas[2];
	var d6 = [];
		var plot1 = $.jqplot('forecastmap', [d1, d5 , d2 ,d3,d6], {
        grid: {
            drawBorder: false,
            shadow: false,
            background: 'rgba(0,0,0,0)'
        },
        highlighter: { show: true },
        seriesDefaults: { 
            shadowAlpha: 0.1,
            shadowDepth: 2,
            fillToZero: true,
			pointLabels: {
				  show: false,
			},
        },
        series: [
            {
                color: 'rgba(206,228,250,1)',
                negativeColor: 'rgba(206,228,250,1)',
                showMarker: false,
                showLine: true,
                fill: true,
                fillAndStroke: true,
                markerOptions: {
                    style: 'filledCircle',
                    size: 8
                },
                rendererOptions: {
                    smooth: false
                }
            },
			{
				color: 'rgba(250,206,219,1)',
                negativeColor: 'rgba(250,206,219,1)',
                showMarker: false,
                showLine: true,
                fill: true,
                fillAndStroke: true,
                markerOptions: {
                    style: 'filledCircle',
                    size: 8
                },
                rendererOptions: {
                    smooth: false
                }
			},
            {
                color: 'green',
                showMarker: false,
                rendererOptions: {
                    smooth: false,
                },
                markerOptions: {
                    style: 'filledCircle',
                    size: 5
                },
            },
			{
                color: 'rgba(255, 0, 0, 1)',
                showMarker: true,
                showLine: false,
                rendererOptions: {
                    smooth: false,
                },
                markerOptions: {
                    style: 'filledCircle',
                    size: 8
                },
				pointLabels: {
				  show: true,
				  ypadding:10
				},
            },
			{
                color: '#facedb',
                negativeColor: '#facedb',
                showMarker: false,
                showLine: false,
                fill: false,
                fillAndStroke: false,
                markerOptions: {
                    style: 'filledCircle',
                    size: 8
                },
                rendererOptions: {
                    smooth: false
                }
            },

        ],
        axes: {
            xaxis: {
                pad: 1.0,
    	        renderer: $.jqplot.CategoryAxisRenderer,
                tickOptions: {
                  showGridline: false,
					fontSize:22,
                }
            },
            yaxis: {
				min:0,
				max:lineymax,
                pad: 1.05,
				tickOptions: {
					fontSize:22,
					formatString:'%.0f'
                }
            }
        },
		 canvasOverlay: {
			  show: true,
			  objects: [
				{dashedHorizontalLine: {
				  name: 'pebbles',
				  y: p1y,
				  xmax: p1x,
				  lineWidth: 2,
				  dashPattern: [2, 4],
				  color: 'rgb(100, 55, 124)',
				  shadow: false,
				  lineCap: 'butt',
				  xOffset: 0
				}},
				{dashedHorizontalLine: {
				  name: 'bam-bam',
				  y: p2y,
				  lineWidth: 4,
				  xmax: l2x,
				  dashPattern: [2, 6],
				  lineCap: 'round',
				  xOffset: '0',
				  color: 'orange',
				  shadow: false
				}},
				
				{dashedVerticalLine: {
                    name: "line1",
                    x: p1x,
					ymax: p1y,
				  lineWidth: 2,
                    color: "#d4c35D",
                    yOffset: 0,
                    shadow: false,
                    showTooltip: true,
				  dashPattern: [2, 4],
                    tooltipFormatString: "PCE=1",
                    showTooltipPrecision: 0.5
                }},
                {dashedVerticalLine: {
                    name: "line2",
                    x: p2x,
					show:yesorno,
					ymax: p2y,
				  lineWidth: 2,
                    color: "#d4c35D",
                    yOffset: 0,
                    shadow: false,
                    showTooltip: true,
				  dashPattern: [2, 4],
                    tooltipFormatString: "PCE=2",
                    showTooltipPrecision: 0.5
                }},
				{dashedVerticalLine: {
                    name: "line3",
                    x: l2xx,
					ymax: p2y,
				  lineWidth: 2,
                    color: "#d4c35D",
                    yOffset: 0,
                    shadow: false,
                    showTooltip: true,
				  dashPattern: [2, 4],
                    tooltipFormatString: "PCE=3",
                    showTooltipPrecision: 0.5
                }}
			  ]
			}
    });
	
		myScroll2.refresh();
		myScroll.refresh();
		$("#rightnum").text(data.point3[1]);
		var rightdanwei;
		if(data.unitStr=="分钟"){
			rightdanwei = "分<br>钟";
		}else{
			rightdanwei = data.unitStr;
		}
		$("#rightdanwei").append(rightdanwei);
		$("#daycolu .jqplot-point-label").append(data.unitStr);
		$(".jqplot-point-"+(data.curDay-1)).css("color","red");
		$("#daycolu .jqplot-point-label").css("margin-left","-20px");
		var linemarkx = $(".jqplot-xaxis-tick");
		for(i=0;i<data.curMonthTotalDays;i++){
			if(((i+1)%5)!=0){
				$(linemarkx[i]).text(" ");
			}
		}
		$.each(linemarkx,function(i,field){
			if($(field).text()=="34"||$(field).text()=="36"||$(field).text()=="37"){
				$(field).text(" ");
			}
		});
		var ptlable = $("#forecast .jqplot-point-label");
		$(".jqplot-point-label").css("font-size","20px");
		if(data.packageLine==0)
		{
			$(".jqplot-point-1").hide();
		}
		$.each(ptlable,function(i,field){
			if($(field).text()==data.point1[1]){
				var thisleft = $(field).css("left");
				var trleft = thisleft.split('p')[0];
				if(data.point1[0].split("-")[1]>5){
					$(field).css("left",trleft*1-60+"px");
				}
				$(field).css("font-size","24px");
				$(field).css("font-weight","bolder");
				$(field).css("color","#000000");
				
			}else if($(field).text()==data.point3[1]){
				var thisleft = $(field).css("left");
				var trleft = thisleft.split('p')[0];
				$(field).css("left",trleft*1-5+"px");
			}
		});
		
		if((data.point2!=null)&&data.point1[1]!=data.point2[1]&&data.point2[1]!=data.point3[1]){
			$.each(ptlable,function(i,field){
				//alert($(field).text());
				if($(field).text()==data.point2[1]){
					$(field).text(data.text);
					//if(data.point1[1]==data.point2[1]){
					//	$(field).text(data.text+" "+data.point1[1]);
					//}
					var thisleft = $(field).css("left");
					var trleft = thisleft.split('p')[0];
					$(field).css("left",trleft/2+"px");
				}else if($(field).text()==data.point1[1]) {
					if(data.point1[1]>data.point2[1]){
						$(field).html("<span style='color:#b72011'>已用"+data.point1[1]+data.unitStr+"</span>");
					}else{
						$(field).html("<span style='color:#074d91'>已用"+data.point1[1]+data.unitStr+"</span>");
					}
					
				}else if($(field).text()==data.point3[1]){
					//alert(1);
					$(field).text("");
					
				}
			});
		}else{
			
			$.each(ptlable,function(i,field){
				
				//没超而且是月底的情况.已用和月底预测相等,只显示一个已用
				if(data.point1[1]==data.point3[1]){
					if(i==ptlable.length-1){
						var restP=$(field).css("left");
						var pxIndex=restP.indexOf("px",0);
						var leftValue=parseFloat(restP.substring(0,pxIndex));
						$(field).html("<span style='color:#074d91'>已用"+data.point1[1]+data.unitStr+"</span>");
					}else{
						$(field).text("");
					}
				}else{
					//没超,不是月底的情况
					if($(field).text()==data.point1[1]){
						$(field).html("<span style='color:#074d91;margin-left:100px; margin-top:-20px;'>已用"+data.point1[1]+data.unitStr+"</span>");
					}else{
						if($(field).text()==data.point3[1]){
							var restP=$(field).css("left");
							var pxIndex=restP.indexOf("px",0);
							var leftValue=parseFloat(restP.substring(0,pxIndex));
							//alert(2);
							$(field).text("");
						}else{
							$(field).append(data.unitStr);
						}
					}
				}

			});
			
			$("#forecastmap").append('<div style="position:relative; top:0; text-align:center; padding-top:20px;">'+data.text+'</div>');
		}
		//data.point2!=null&&
		if(data.point2!=null&&data.point2[1]!=data.point3[1]){
			$(ptlable[1]).css("margin-left","-10px");
		}
		switch(parseFloat(busiType))
		{
			case 1:
				$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
				$("input[type='radio']:eq(1)").attr("checked",false).checkboxradio("refresh");
				$("input[type='radio']").trigger("change");
				break;
			case 2:
				$("#daymap").trigger("click");
				$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
				$("input[type='radio']:eq(1)").attr("checked",false).checkboxradio("refresh");
				$("input[type='radio']").trigger("change");
				break;
			case 3:
				
				$("#monthmap").trigger("click");
				
				$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
				$("input[type='radio']:eq(1)").attr("checked",false).checkboxradio("refresh");
				$("input[type='radio']").trigger("change");
				break;
			case 4:
				$("#monthmap").trigger("click");
				$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
				$("input[type='radio']:eq(1)").attr("checked",false).checkboxradio("refresh");
				$("input[type='radio']").trigger("change");
				break;
		}
		$("#monthmap").bind("click",function(){
				//记录用户查看线形图点击量
				var jilu=jsonserver+"util/lineclick/busitype/"+busiType;
				$.getJSON(jilu+".jsonp?callback=?",{},function(data){});
			
		});
	window.setTimeout(function(){myScroll.refresh();},2000);
	});
	$("#content").append('<div class="woDiv" onclick="download()"><span style="color:#49494b;">下载智能云管家客户端</span><img src="res/img/downll.png" style="padding-top:15px;"/></div>');
});
function gotoday(a,b){
var width1 = $("#daycolu").width();
var width2 = $("#yuyinbar").width();
var width3 = a/b*width2-width1-9;
//var width3 = width2-width1;
if(width3<=0){
	return false;
}
myScroll2.scrollTo(width3,0,0,true);
}
function bottomrefre(){
	if(detectDeviceType!="Apple"){
		//$("#wrapper").css("bottom","0px");
		//$("#wrapper").css("padding-bottom","110px");
		$("#footer1").height("430px");
		//$("#wrapper").css("bottom","0px");
		window.scrollTo(0,1);
	}else{
		
		//$("#footer").css("bottom","-110px");
		window.scrollTo(0,1);
	}
				myScroll.refresh();
	
}
function changesc(){
	window.setTimeout(function(){myScroll.refresh();}, 1000);
}
function showDG()
{
	var sheight = document.documentElement.clientHeight;
	if(navigator.userAgent.toLowerCase().indexOf("android", 0)<0){
		sheight = sheight+123;
	}
	var wintop = (sheight-776)/2;
	$(".packpage").css("top",wintop+"px");
	//window.scrollTo(0,1);
	$("#blackback").show();
	$("#packpage3").show();
	scrtop = window.top;
	//alert(scrtop);
	window.scrollTo(0,1);
}
function exitpac(){
	$("#scroller3").empty();
	$(".packpage3").hide();
	$("#blackback").hide();
	$("#packpage3").hide();
}
function goback2(){
	$("#blackback").hide();
	$("#packpage3").hide();
}
function next3(){
	goback2();
}
</script>
<style type="text/css">

</style>
<link href="res/index/css/detail.css" rel="stylesheet" type="text/css">
<style type="text/css">
*{
	font-family:Heiti SC;
	font-weight:600;
}
</style>
<link href="res/css/jquery.mobile-1.2.0-rc.2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
//var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
//document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2284c04845acdcd94dd640a8555927dc' type='text/javascript'%3E%3C/script%3E"));
</script>
</head>

<body onResize="changesc()">
<span style="display:none;" id="v1"></span>
<span style="display:none;" id="v2"></span>
  <div id="blackback" class="blackback" style="display:none"></div>
<div id="packpage3" class="packpage" style="display:none">
    	<div style="height:16px; width:100%"><img height="16px" width="100%" src="res/img/billdet/jianbian.png"/></div>
    	<div class="packpagetitle">业务订购
</div>
<img src="res/img/billdet/hengxian.png"/>
<div class="changeconfirm">
	<p>一.短信订购</p>
    <p><span id="smscode">发送短信代码 "SQDXB5" 至10010即可完成订购.</span></p>
    <p></p>
    <p>二.拨打10010订购</p>
    <div style="text-align:center; margin:100px auto;"><img src="res/index/images/busi_back.png" onClick="exitpac()"/></div>
</div>
        <div style="position:absolute; bottom:-1px; height:16px; width:100%"><img width="100%" height="16px" src="res/img/billdet/jianbian.png"/></div>
    <div style="position:absolute; top:-12px; right:-14px; width:56px; height:55px" onClick="exitpac()"><img src="res/img/billdet/exit.png"/></div>

    </div>
	<div id="wrapper">
    <div id="scroller">
	<div id="header"> 
   <table width="100%" height="88px">
    	<tr>
        	<td width="10%" onClick="javascript:location.href='index.html'">
            <div><img src="res/img/back.png"/></div>
            </td>
            <td width="80%">
            <div id="detheader" style="font-size:34px; font-weight:bold; color:#fff;">业务详情</div>
            </td>
            <td width="10%">
            
            </td>
        </tr>
    </table>
    </div>
    <div id="content">
    <div id="loading" class="loading"><img src="res/loading.gif"/>载入中...</div>
    <div class="floatBoxBg"></div>
 <div id="monthbar"></div><!--本月XX-->
    
    <div id="monthtab" align="center"></div><!--本月表格-->
    <div align="center">
    
    <fieldset data-type="horizontal" data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal"><div class="ui-controlgroup-controls">
			         	<div id="daymap" class="ui-radio"><input type="radio" value="off" id="radio-choice-d" name="radio-choice-b"><label id="daylabel" for="radio-choice-d" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-up-c ui-radio-off"><span class="ui-btn-text" style="font-size:26px">每日<span id="usetype1"></span>使用情况</span></label></div>
			         	
			         	<div id="monthmap" class="ui-radio"><input type="radio" value="other" id="radio-choice-e" name="radio-choice-b"><label id="monthlabel" for="radio-choice-e" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-radio-off ui-corner-right ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-text" style="font-size:26px">本月<span id="usetype2"></span>使用预测</span></label></div>
			         	
			    </div></fieldset>
                </div>
    <div id="forecast">
    <div id="forecasttitle"></div>
    <div class="danwei"></div>
    <div style="height:300px;">
    <div id="forecastmap">
    </div>
    <div style="float:right; width:10%; height:300x; font-size:20px; color:#666666; text-align:center; margin-top:80px;">月<br>底<br>预<br>测<br><span id="rightnum"></span><br><span id="rightdanwei"></span></div>
    </div>
    <div id="line_det" style="font-size:24px; line-height:30px; padding-left:25px; padding-right:25px; padding-bottom:20px;"></div>
    </div><!--本月预测-->
   
<div id="daycolu">
    <div id="scroller2">
	<div id="yuyinbar" style=" margin:0px auto;width:100%; height:240px;">
    
    </div>
    </div>
    <div id="scrdet" style="font-size:24px; line-height:30px; padding-left:25px; padding-right:25px; padding-bottom:20px;">
    </div>
    </div>
   	<div id="recommon" style="display:none">
    <div id="recomtext"></div>
    <div id="recotitle" class="recobg" onClick="upordown1()">
    <table height="83px" width="100%" border="0">
  <tr>
    <td height="83px"><div style="height:83px"><div id="recotitltext" style="height:83px; line-height:83px; font-size:30px; padding-left:15px"></div><div id="sanjiao" style="position:relative; bottom:18px; left:5%; width:20px; height:11px"><img src="res/img/jiao.png"/></div></div></td>
    <td width="52px"><div><img id="upordown" src="res/img/up.png"/></div></td>
  </tr>
</table>
    </div>
    <div id="recodet" style="height:110px">
    <table height="109px" width="100%" border="0">
  <tr>
    <td><div id="recodettb1" style="padding-left:10px"></div></td>
    <td width="144px"><img src="res/img/buy_btn.png" onClick="showDG()"/></td>
  </tr>
</table>

    </div>
    </div><!--业务推荐-->
    
    <div id="monthtop">
    	<div id="toptitle">
        </div>
        <div id="toptab" style="text-align:center">
        </div>
    </div><!--本月排行-->
    
    <div id="payhistory">
    <div id="histitle">
    </div>
    <div id="histab" style="text-align:center"></div>
    <div style="color:#676767; font-size:24px; text-align:center; padding-top:10px;">注:本页数据仅供参考，详细内容请以营业厅信息为准!</div>
    </div><!--消费历史-->

	</div>
<div id="footer1">
</div>
    </div></div></div>
   
</body>
</html>
